<script id="shards_container-template" type="text/x-handlebars-template">
    <h2 class="title">Shard status</h2>
    <div class="shard-status"></div>
    <h2 class="title">Sharding settings</h2>
    <div class="user-alert-space"></div>
    <div class="critical_error alert alert-error"></div>
    <div class="edit-shards"></div>
    <div class="data_repartition-container">
        <p>Loading...</p>
    </div>
</script>

<script id="view_shards-template" type="text/x-handlebars-template">
    <div class="cannot_shard-alert alert alert-error"></div>
    <button class="btn edit">Edit</button>
    <p class="icon_paragraph"><span class="big">{{num_shards}}</span> <span class="shard_text">{{pluralize_noun "shard" num_shards}}</span></p> 
</script>


<script id="edit_shards-template" type="text/x-handlebars-template">
    <div class="cannot_shard-alert alert alert-error"></div>
    <button class="btn cancel">&times;</button>
    <button class="btn rebalance">Rebalance</button>
    <p class="icon_paragraph">
        <input class="num-shards" type="text" value="{{num_shards}}" />
        <span class="shard_text">{{pluralize_noun "shard" num_shards}}</span>
    </p>
    <p class="max-value">max shards: {{max_shards}}</p>
</script>


<script id="edit_shards-feedback-template" type="text/x-handlebars-template">
    <p>{{this}}</p>
</script>

<script id="alert_shard-template" type="text/x-handlebars-template">
    {{#if changing}}
        Changing number of shards to {{num_shards}}.
    {{else}}
        Sharding complete.
    {{/if}}
</script>

<script id="edit_shards-ajax_error-template" type="text/x-handlebars-template">
    Sorry, something went wront with the ajax request. Please refresh and try again.
</script>

<script id="data_repartition-template" type="text/x-handlebars-template">
    <div class="shard-graph">
        <svg class="shard-diagram" width="700" height="350">
            <text x="300" y="150" class="loading_text-diagram">Loading data...</text>
        </svg>
    </div>
</script>

<script id="shard_status-template" type="text/x-handlebars-template">
    {{#if operation_active}}
        <div class="progress-status">
            <div class="stages">
                {{#if starting}}
                    <p>Started</p>
                {{/if}}
                {{#if processing}}
                    <p class="completed">Started</p>
                    <p>Sharding</p>
                {{/if}}
                {{#if finished}}
                    <p class="completed">Started</p>
                    <p class="completed">Sharded</p>
                {{/if}}
            </div>
            {{#if starting}}
                <p>0/{{new_value}} shards completed</p>
            {{else}}
                <p>{{current_value}}/{{max_value}} shards completed</p>
            {{/if}}
            <div class="progress"><div class="bar" style="width:{{#if starting}}0{{else}}{{percent_complete}}{{/if}}%"></div></div>
        </div>
    {{else}}
        <p><span class="big">{{current_value}}/{{max_value}}</span> shards available</p>
    {{/if}}
</script>

<script id="shards-reason_cannot_shard-template" type="text/x-handlebars-template">
    {{#if machine_down}}
        Please resolve pending issues before sharding.
    {{/if}}
    {{#if unsatisfiable_goals}}
        Please resolve pending issues before sharding.
    {{/if}}
</script>
